{template 'header'}
<style>
    .tasks_conten_text li:after, .tasks_conten_ask li:after {
        background: none;
    }

    .tasks_conten_text .tasks_conten_text_info:after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 15px;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .mui-btn-block {
        margin: 0 auto;
        font-size: 16px;
        padding: 8px 0;
    }

    #remessage {
        width: 96%;
        margin: 0 auto 10px auto;
        display: block;
    }
    #remark{
        min-height: 28vh;
        position: relative;
        padding-bottom: 2vh;
    }
    #remark img{
        width: 100%;
    }
    #end_time{
        position: absolute;
        bottom: 0vh;
        right: 1vw;
    }
    .detail_head{
        background: #fff;
    }
    .detail_head h4{
        font-size: 14px;
        color: #051d7a;
    }
    .detail_head p{
        font-size: 12px !important;
    }
    .detail_head img{
        border-radius:6px;
    }
    .detail_head_img{
        margin-bottom: 1.4vh;
    }
    .detail_task{
        padding: 12px 10px;
        background: #fff;
        margin-bottom: 50px;
    }
    .detail_task p{
        font-size: 12px;
        margin-bottom: 0;
    }
    .mui-btn{
        margin-top: 1vh;
        position: fixed;
        bottom: 0;
    }
</style>
</head>
<body>
<!-- 头部 结束 -->
<div class="mui-content">
    <div class="mui-card-header mui-card-media detail_head">
        <img src="{MODULE_URL}assets/img/task.jpg">
        <div class="mui-media-body">
            <h4>{$detail['title']}</h4>
            <p>{$detail['create_time']}</p>
        </div>
    </div>
    <div class="mui-card-header mui-card-media detail_head_img" style="height:40vw;background-image:url('{$detail['thumb']}')"></div>
    <div class="mui-card-content detail_task">
            <p>任务编号 : {$detail['id']}</p>
            <p>已抢 :<b class='mui-badge mui-badge-inverted mui-badge-danger'>{$detail['receive_num']}</b>/{$detail['release_num']}， <span class="mui-badge mui-badge-inverted mui-badge-danger">{$detail['task_money']}</span>元/份</p>
            <hr>
                <!--<p>任务描述</p>-->
                <div class=" tasks_conten_text_info" id="remark">
                    <p>{$detail['remark']}</p>
                    <a href="javascript:;" class="mui-badge mui-badge-warning mui-badge-inverted" id="end_time">剩余 ：<span id="_d">00</span><span id="_h">00</span><span id="_m">00</span><span id="_s">00</span></a>
                </div>
            <hr>
            <p>任务要求 : <span>{$detail['validate']}</span></p>
    </div>
<!--    <div class="mui-card-footer">-->
<!--    <a href="{$detail['task_link']}" class="mui-card-link">下载 </a>-->
<!--    </div>-->
    {if $detail['receive_status']==-1}
    <button class="mui-btn mui-btn-primary mui-btn-block" type="button" onclick="robTask({$detail['id']})">接任务</button>
    {elseif $detail['receive_status']==0}
    <button class="mui-btn mui-btn-warning mui-btn-block" type="button" onclick="submitTask({$detail['receive_id']})">提交任务</button>
    {elseif $detail['receive_status']==1}
    <button class="mui-btn mui-btn-block" disabled>任务已失效</button>
    {elseif $detail['receive_status']==2}
    <button class="mui-btn mui-btn-success mui-btn-block" disabled>任务待审核</button>
    {else}
    <button class="mui-btn mui-btn-success mui-btn-block" disabled>任务已完结</button>
    {/if}
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<!-- 以上为引入第三方插件 -->
<script>
    // 页面初始化
    mui.init();
    function download(url){

    }
    function robTask(id){
        var rob_url = '{php echo $this->createMobileUrl("core",array("op"=>"rob"))}';
        mui.ajax(rob_url,{
            data:{id},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                if(ret.code==10001){
                    mui.toast(ret.msg);
                    location.href = '{php echo $this->createMobileUrl("public",array("op"=>"login"))}'
                }else if(ret.code==0){
                    mui.toast(ret.msg)
                }else{
                    mui.alert(ret.msg,'',function(){
                        location.href = '{php echo $this->createMobileUrl("index",array("op"=>"index"))}'
                    })
                }
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.alert(errorThrown);
            }
        });
    }
    function submitTask(){
        var taskid = '{$id}'
        location.href = '{php echo $this->createMobileUrl("core",array("op"=>"task_submit"))}' + "&taskid=" + taskid
    }
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var end = {$detail['end_time']} * 1000;
        //时间差
        var leftTime = end-now;
        var d,h,m,s;
        if (leftTime>=0) {
            d = Math.floor(leftTime/1000/60/60/24);
            h = Math.floor(leftTime/1000/60/60%24);
            m = Math.floor(leftTime/1000/60%60);
            s = Math.floor(leftTime/1000%60);
            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d+"天";
            document.getElementById("_h").innerHTML = h+"时";
            document.getElementById("_m").innerHTML = m+"分";
            document.getElementById("_s").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
        }else {
            mui.alert('任务已结束')
        }

    }
    countTime()
</script>
</body>
</html>